<!DOCTYPE html>
<html  lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--360浏览器优先以webkit内核解析-->
    <title>鑫视鑫瑞</title>
    <link rel="shortcut icon" href="favicon.ico">
    <link href="../static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
    <link href="../static/css/font-awesome.min.css" th:href="@{/css/font-awesome.min.css}" rel="stylesheet"/>
    <link href="../static/css/main/animate.min.css" th:href="@{/css/main/animate.min.css}" rel="stylesheet"/>
    <link href="../static/css/main/style.min862f.css" th:href="@{/css/main/style.min862f.css}" rel="stylesheet"/>
</head>

<body class="gray-bg">
    <div class="wrapper wrapper-content">
        <div class="row">
            <div class="col-sm-6">
                <h4 id="totalCustomerCount"></h4>
                <div class="col-sm-6">
                    <div class="ibox float-e-margins">
                        <div class="ibox-title">
                            <h5>公司每月新增客户量(近12个月)</h5>
                        </div>
                        <div class="ibox-content">
                            <div class="echarts" id="customerIncr"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-6">
                <h4 id="totalRentCount"></h4>
                <div class="col-sm-6">
                    <div class="ibox float-e-margins">
                        <div class="ibox-title">
                            <h5>公司每年出库单数据(近5年)</h5>
                        </div>
                        <div class="ibox-content">
                            <div class="echarts" id="rentYearIncr"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-sm-6">
                <div class="col-sm-6">
                    <div class="ibox float-e-margins">
                        <div class="ibox-title">
                            <h5>公司每月出库单数据(近12个月)</h5>
                        </div>
                        <div class="ibox-content">
                            <div class="echarts" id="rentMonthIncr"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="col-sm-6">
                    <div class="ibox float-e-margins">
                        <div class="ibox-title">
                            <h5>出库单最多的十个客户</h5>
                        </div>
                        <div class="ibox-content">
                            <div class="echarts" id="topTenCustomer"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-sm-6">
                <div class="col-sm-6">
                    <div class="ibox float-e-margins">
                        <div class="ibox-title">
                            <h5>各个设备类型出租次数</h5>
                        </div>
                        <div class="ibox-content">
                            <div class="echarts" id="rentTypeNumber"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="col-sm-6">
                    <div class="ibox float-e-margins">
                        <div class="ibox-title">
                            <h5>最高出租次数的设备型号前10名</h5>
                        </div>
                        <div class="ibox-content">
                            <div class="echarts" id="topTenDeviceMode"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script th:src="@{/js/jquery.min.js}"></script>
    <script th:src="@{/js/bootstrap.min.js}"></script>
    <script th:src="@{/ajax/libs/layer/layer.min.js}"></script>
    <th:block th:include="include :: echarts-js" />
    <script type="text/javascript">
	    $('#pay-qrcode').click(function(){
	        var html=$(this).html();
	        parent.layer.open({
	            title: false,
	            type: 1,
	            closeBtn:false,
	            shadeClose:true,
	            area: ['600px', '360px'],
	            content: html
	        });
	    });
        $(function () {
            //全局变量，便于给图表赋值
            var xData;//X轴类目
            var vData;//实际数据
            $.ajax({url:"http://"+window.location.host + "/system/customer/getTotalCustomerCount",
                type:"get",
                async:false,
                traditional:false,
                success:function(data){
                    $("#totalCustomerCount").html("目前公司客户总量："+data.value);
                }
            });
            //ajax从后台获取数据给全局变量
            $.ajax({url:"http://"+window.location.host + "/system/customer/queryLastYearEveryMothTotalCustomerCount",
                type:"get",
                async:false,
                traditional:false,
                success:function(data){
                    //后台拼接组装好的json数据传给前台这里，直接转化一下根据键名获取键值，赋值给全局变量
                    xData = data.value.X;
                    vData = data.value.V;
                }
            });
            //获取饼状图容器 并 初始化echarts实例
            var customerIncrBarChart = echarts.init(document.getElementById("customerIncr"));
            var consumerBarOption = {
                color: ['#3398db'],
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                        type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                calculable : true,
                xAxis: [
                    {
                        type: 'category',
                        data: xData,
                        axisTick: {
                            alignWithLabel: true
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value'
                    }
                ],
                series: [
                    {
                        name: '当月新增客户数量',
                        type: 'bar',
                        barWidth: '60%',
                        data: vData,
                        markPoint : {
                            data : [
                                {type : 'max', name: '最大值'},
                                {type : 'min', name: '最小值'}
                            ]
                        },
                        markLine : {
                            data : [
                                {type : 'average', name: '平均值'}
                            ]
                        }
                    }
                ]
            };
            customerIncrBarChart.setOption(consumerBarOption);
            window.onresize = customerIncrBarChart.resize;
            //2
            $.ajax({url:"http://"+window.location.host + "/system/rent/getTotalRentCount",
                type:"get",
                async:false,
                traditional:false,
                success:function(data){
                    $("#totalRentCount").html("目前公司出库单总量："+data.value);
                }
            });
            //ajax从后台获取数据给全局变量
            $.ajax({url:"http://"+window.location.host + "/system/rent/queryEveryYearRentCount",
                type:"get",
                async:false,
                traditional:false,
                success:function(data){
                    //后台拼接组装好的json数据传给前台这里，直接转化一下根据键名获取键值，赋值给全局变量
                    xData = data.value.X;
                    vData = data.value.V;
                }
            });
            //获取饼状图容器 并 初始化echarts实例
            var rentYearIncrBarChart = echarts.init(document.getElementById("rentYearIncr"));
            var rentYearIncrBarOption = {
                color: ['#3398DB'],
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                        type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                calculable : true,
                xAxis: [
                    {
                        type: 'category',
                        data: xData,
                        axisTick: {
                            alignWithLabel: true
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value'
                    }
                ],
                series: [
                    {
                        name: '当年出单数量',
                        type: 'bar',
                        barWidth: '60%',
                        data: vData,
                        markPoint : {
                            data : [
                                {type : 'max', name: '最大值'},
                                {type : 'min', name: '最小值'}
                            ]
                        },
                        markLine : {
                            data : [
                                {type : 'average', name: '平均值'}
                            ]
                        }
                    }
                ]
            };
            rentYearIncrBarChart.setOption(rentYearIncrBarOption);
            window.onresize = rentYearIncrBarChart.resize;
            //3
            $.ajax({url:"http://"+window.location.host + "/system/rent/queryLastEveryMonthRentCount",
                type:"get",
                async:false,
                traditional:false,
                success:function(data){
                    //后台拼接组装好的json数据传给前台这里，直接转化一下根据键名获取键值，赋值给全局变量
                    xData = data.value.X;
                    vData = data.value.V;
                }
            });
            //获取饼状图容器 并 初始化echarts实例
            var rentMonthIncrBarChart = echarts.init(document.getElementById("rentMonthIncr"));
            var rentMonthIncrBarOption = {
                color: ['#3398DB'],
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                        type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                calculable : true,
                xAxis: [
                    {
                        type: 'category',
                        data: xData,
                        axisTick: {
                            alignWithLabel: true
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value'
                    }
                ],
                series: [
                    {
                        name: '当月出单数量',
                        type: 'bar',
                        barWidth: '60%',
                        data: vData,
                        markPoint : {
                            data : [
                                {type : 'max', name: '最大值'},
                                {type : 'min', name: '最小值'}
                            ]
                        },
                        markLine : {
                            data : [
                                {type : 'average', name: '平均值'}
                            ]
                        }
                    }
                ]
            };
            rentMonthIncrBarChart.setOption(rentMonthIncrBarOption);
            window.onresize = rentMonthIncrBarChart.resize;
            //4
            $.ajax({url:"http://"+window.location.host + "/system/rent/queryTopTenCustomer",
                type:"get",
                async:false,
                traditional:false,
                success:function(data){
                    //后台拼接组装好的json数据传给前台这里，直接转化一下根据键名获取键值，赋值给全局变量
                    xData = data.value.X;
                    vData = data.value.V;
                }
            });
            //获取饼状图容器 并 初始化echarts实例
            var topTenCustomerBarChart = echarts.init(document.getElementById("topTenCustomer"));
            var topTenCustomerBarOption = {
                color: ['#3398DB'],
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                        type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                calculable : true,
                xAxis: [
                    {
                        type: 'category',
                        data: xData,
                        axisTick: {
                            alignWithLabel: true
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value'
                    }
                ],
                series: [
                    {
                        name: '该客户出库单量',
                        type: 'bar',
                        barWidth: '60%',
                        data: vData,
                        markPoint : {
                            data : [
                                {type : 'max', name: '最大值'},
                                {type : 'min', name: '最小值'}
                            ]
                        },
                        markLine : {
                            data : [
                                {type : 'average', name: '平均值'}
                            ]
                        }
                    }
                ]
            };
            topTenCustomerBarChart.setOption(topTenCustomerBarOption);
            window.onresize = topTenCustomerBarChart.resize;
            //5
            $.ajax({url:"http://"+window.location.host + "/system/link/queryEveryDeviceTypeRentCount",
                type:"get",
                async:false,
                traditional:false,
                success:function(data){
                    //后台拼接组装好的json数据传给前台这里，直接转化一下根据键名获取键值，赋值给全局变量
                    xData = data.value.X;
                    vData = data.value.V;
                }
            });
            //获取饼状图容器 并 初始化echarts实例
            var rentTypeNumberBarChart = echarts.init(document.getElementById("rentTypeNumber"));
            var rentTypeNumberBarOption = {
                color: ['#3398DB'],
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                        type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                calculable : true,
                xAxis: [
                    {
                        type: 'category',
                        data: xData,
                        axisTick: {
                            alignWithLabel: true
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value'
                    }
                ],
                series: [
                    {
                        name: '该设备类型出租次数',
                        type: 'bar',
                        barWidth: '60%',
                        data: vData,
                        markPoint : {
                            data : [
                                {type : 'max', name: '最大值'},
                                {type : 'min', name: '最小值'}
                            ]
                        },
                        markLine : {
                            data : [
                                {type : 'average', name: '平均值'}
                            ]
                        }
                    }
                ]
            };
            rentTypeNumberBarChart.setOption(rentTypeNumberBarOption);
            window.onresize = rentTypeNumberBarChart.resize;
            //6
            $.ajax({url:"http://"+window.location.host + "/system/link/queryRentTopTenDevice",
                type:"get",
                async:false,
                traditional:false,
                success:function(data){
                    //后台拼接组装好的json数据传给前台这里，直接转化一下根据键名获取键值，赋值给全局变量
                    xData = data.value.X;
                    vData = data.value.V;
                }
            });
            //获取饼状图容器 并 初始化echarts实例
            var topTenDeviceModeBarChart = echarts.init(document.getElementById("topTenDeviceMode"));
            var topTenDeviceModeBarOption = {
                color: ['#3398DB'],
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                        type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                calculable : true,
                xAxis: [
                    {
                        type: 'category',
                        data: xData,
                        axisTick: {
                            alignWithLabel: true
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value'
                    }
                ],
                series: [
                    {
                        name: '该设备型号出租次数',
                        type: 'bar',
                        barWidth: '60%',
                        data: vData,
                        markPoint : {
                            data : [
                                {type : 'max', name: '最大值'},
                                {type : 'min', name: '最小值'}
                            ]
                        },
                        markLine : {
                            data : [
                                {type : 'average', name: '平均值'}
                            ]
                        }
                    }
                ]
            };
            topTenDeviceModeBarChart.setOption(topTenDeviceModeBarOption);
            window.onresize = topTenDeviceModeBarChart.resize;
        });
    </script>
</body>
</html>
